<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统错误 - 电影院管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
        }
        
        .error-container {
            background: white;
            padding: 50px;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 600px;
            width: 90%;
        }
        
        .error-icon {
            font-size: 80px;
            margin-bottom: 20px;
        }
        
        .error-code {
            font-size: 48px;
            font-weight: bold;
            color: #e74c3c;
            margin-bottom: 20px;
        }
        
        .error-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
        }
        
        .error-message {
            font-size: 16px;
            color: #666;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .error-details {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
            text-align: left;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #666;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            font-weight: 500;
            transition: transform 0.2s;
            margin: 0 10px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: #6c757d;
        }
        
        .suggestions {
            text-align: left;
            margin-bottom: 30px;
        }
        
        .suggestions h4 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .suggestions ul {
            color: #666;
            padding-left: 20px;
        }
        
        .suggestions li {
            margin-bottom: 5px;
        }
        
        .timestamp {
            font-size: 12px;
            color: #999;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="error-container">
        <div class="error-icon">😵</div>
        
        <div class="error-code" th:text="${status ?: '500'}">500</div>
        
        <div class="error-title" th:text="${error ?: '系统内部错误'}">系统内部错误</div>
        
        <div class="error-message">
            <span th:if="${message}" th:text="${message}">抱歉，系统遇到了一个错误。我们正在努力修复这个问题。</span>
            <span th:unless="${message}">抱歉，系统遇到了一个错误。我们正在努力修复这个问题。</span>
        </div>
        
        <!-- 错误详情（仅在开发环境显示） -->
        <div th:if="${trace}" class="error-details">
            <strong>错误详情：</strong><br>
            <span th:text="${trace}">错误堆栈信息</span>
        </div>
        
        <div class="suggestions">
            <h4>您可以尝试：</h4>
            <ul>
                <li>刷新页面重试</li>
                <li>检查网络连接</li>
                <li>返回控制台重新开始</li>
                <li>如果问题持续存在，请联系系统管理员</li>
            </ul>
        </div>
        
        <div>
            <a href="javascript:history.back()" class="btn btn-secondary">返回上页</a>
            <a href="javascript:goToDashboard()" class="btn">返回控制台</a>
            <button onclick="location.reload()" class="btn">刷新页面</button>
        </div>
        
        <div class="timestamp">
            错误时间：<span th:text="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd HH:mm:ss')}">时间戳</span>
        </div>
    </div>
    
    <script>
        // 自动记录错误信息到控制台
        console.error('页面错误信息:', {
            status: /*[[${status}]]*/ '500',
            error: /*[[${error}]]*/ '系统错误',
            message: /*[[${message}]]*/ '未知错误',
            path: /*[[${path}]]*/ window.location.pathname,
            timestamp: new Date().toISOString()
        });
        
        // 根据用户角色跳转到对应的dashboard
        function goToDashboard() {
            // 检查当前路径来判断用户角色
            const currentPath = window.location.pathname;
            if (currentPath.startsWith('/admin/')) {
                window.location.href = '/admin/dashboard';
            } else if (currentPath.startsWith('/manager/')) {
                window.location.href = '/manager/dashboard';
            } else if (currentPath.startsWith('/receptionist/')) {
                window.location.href = '/receptionist/dashboard';
            } else {
                // 默认跳转到登录页面
                window.location.href = '/';
            }
        }
        
        // 5秒后自动提示用户
        setTimeout(function() {
            if (confirm('页面似乎遇到了问题，是否要返回控制台？')) {
                goToDashboard();
            }
        }, 5000);
    </script>
</body>
</html>